<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #infoDiv{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>

    <script>
        function $(id){
            return document.getElementById(id);
        }
        let websocketObj;
        window.onload = function (){
            socketInit();
        }

        function socketInit(){
            //创建websocket对象
            websocketObj = new WebSocket("ws://127.0.0.1:8080/socketInfo");
            websocketObj.onopen = function (){}
            websocketObj.onclose = function (){}
            websocketObj.onerror = function (){}
            websocketObj.onmessage = function (back){
                $("infoDiv").innerHTML += back.data+"<br>";
            }
        }

        function sendMsg(){
            websocketObj.send($("msgTxt").value);
        }
    </script>
</head>
<body>
    <div id="infoDiv"></div>
    <input type="text" id="msgTxt">
    <input type="button" value="发送消息" onclick="sendMsg()">
</body>
</html>